<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lalahahababa
 * @LastEditTime: 2022-01-07 18:16:02
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" style="height: 95%"></div>
</template>


<script>
import { get } from '../../../utils/request';
import { Pie } from '@antv/g2plot';


export default {
      data(){
        return{
          dataArr:[]
        } 
    },

    mounted(){
      this.initData()

      },
      methods:{
        initData() {
          get('/dashboard/queryDeviceOnlineNumber').then(res =>{
            console.log(99,res);
            this.dataArr = res.data
            this.initChart()
          })
        },

      initChart(){
        const pie = new Pie(this.$refs.bottom1_container,{
          appendPadding: 10,
          data: this.dataArr,
          angleField: 'value',
          colorField: 'type',
          radius: 0.9,
           interactions: [{ type: 'element-active' }]

        })
        pie.render();
      }



        }
}

</script>


<style scoped>

</style>